<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小案例</title>
</head>

<style>
    * {
        font-family: Arial;
        font-size: 14px;
        margin: 0;
        padding: 0;
        border: none;
    }

    a {
        text-decoration: none;
    }

    ul {
        list-style: none;
    }

    body,
    html {
        margin: 0;
        padding: 0;
    }

    body {
        background-image: url("./images/bg.jpg");
        background-repeat: no-repeat;
        /* background-size: cover; */
        /* background-size: 100% 100%; */
        background-size: cover;
    }

    .header {
        height: 70px;
        background-color: rgba(0, 0, 0, 0.7);
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav_list {
        display: flex;
    }

    .nav_list li a {
        color: white;
        border: 1px solid white;
        border-radius: 8px;
        padding: 10px;
        margin-right: 20px;
    }

    .nav_list li:last-child a {
        margin-right: 0;
    }

    .content {
        display: flex;
        height: calc(100vh - 70px);
        justify-content: center;
        align-items: center;
    }

    .content_item {
        width: 1000px;
        height: 300px;
        /* background-color: skyblue; */
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .item {
        width: 180px;
        height: 200px;
        /* background-color: red; */
        margin: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
      transition: 0.3s linear;
        cursor: pointer;
    }
       .content_item .item:nth-child(1) {
        background-color: #595CA8;
    }
           .content_item .item:nth-child(2) {
        background-color:     #FF9D2E;
    }       .content_item .item:nth-child(3) {
        background-color:   #01A6DE;
    }       .content_item .item:nth-child(4) {
        background-color:     #015E91;
    }       .content_item .item:nth-child(5) {
        background-color: #1DC128;
    }
    .content_item .item:hover {
        /* transform: scale(1.1); */ 
        box-shadow: 0px 0px 20px black;
    }
    .item span {
        color: white;
        font-size: 20px;
    }

</style>

<body>
    <header class="header">
        <div class="logo">
            <img src="./images/logo.png" alt="">
        </div>
        <nav class="navbar">
            <ul class="nav_list">
                <li><a href="">国内校区</a></li>
                <li><a href="">缅甸校区</a></li>
                <li><a href="">美国校区</a></li>
                <li><a href="">日本校区</a></li>
            </ul>
        </nav>
    </header>
    <div class="content">
        <div class="content_item">
            <div class="item">
                <img src="./images/item1.png" alt="">
                <span>我的邮箱</span>
            </div>
            <div class="item">
                <img src="./images/item2.png" alt="">
                <span>云服务</span>
            </div>
                <div class="item">
                    <img src="./images/item3.png" alt="">
                    <span>我的手机</span>
                </div>
                <div class="item"><img src="./images/item4.png" alt="">
                    <span>我的微信</span>
                </div>
                    <div class="item"><img src="./images/item5.png" alt="">
                        <span>在线客服</span>
                    </div>
            </div>
        </div>
</body>

</html>